<template>
  <div>
    <!-- 文章列表 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
   <article-item v-for="obj in articleList" :key="obj.art_id" :articleObj="obj" @click.native="detailFn(obj.art_id)"></article-item>
</van-list>
</van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem.vue'
import { getArticleListAPI } from '@/api'
export default {
  data () {
    return {
      articleList: [],
      loading: false,
      finished: false,
      nextTime: new Date(),
      isLoading: false
    }
  },
  props: {
    channel_id: Number
  },
  components: {
    ArticleItem
  },
  methods: {
    async getArticleListFn () {
      const res = await getArticleListAPI({
        channel_id: this.channel_id,
        timestamp: this.nextTime
      })
      this.articleList = [...this.articleList, ...res.data.data.results]
      if (res.data?.data?.pre_timestamp === null) {
        this.finished = true
        this.nextTime = null
      } else {
        this.nextTime = res.data.data.pre_timestamp
      }
      this.loading = false
      setTimeout(() => {
        this.isLoading = false
      }, 1000)
    },
    onLoad () {
      if (this.articleList.length > 0) {
        this.getArticleListFn()
      }
    },
    onRefresh () {
      this.articleList = []
      this.nextTime = new Date()
      this.getArticleListFn()
    },
    detailFn (artId) {
      this.$router.push({
        path: '/article_detail',
        query: {
          artId
        }
      })
    }
  },
  created () {
    this.getArticleListFn()
  }
}
</script>
